<div class=" flex flex_column flex_1 background">
    <div class="title">API服务</div>
    <div class="bg_white mgt20 flex_1 main">
        <!--上部搜索-->
        <nz-input-group [nzSuffix]="suffixIconSearch" class="searchinput">
            <input type="text" nz-input placeholder="Search" />
        </nz-input-group>
        <ng-template #suffixIconSearch>
            <i nz-icon nzType="search"></i>
        </ng-template>
        <div class="refresh_div">
            <img src="assets/images/icon_refresh.png" class="refresh_img" />
        </div>

        <!--下部表格-->
        <nz-table #basicTable [nzData]="listOfData" class="table">
            <thead>
                <tr class="thead_font">
                    <th nzWidth="16%">名称</th>
                    <th nzWidth="12%">状态</th>
                    <th nzWidth="14%">API URI</th>
                    <th nzWidth="18%">调用失败次数/调用总次数</th>
                    <th nzWidth="21%">描述</th>
                    <th nzWidth="19%">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of basicTable.data" class="tbody_font">
                    <td>{{ data.projectName }}</td>
                    <td>
                        <span *ngIf="data.state === '可用'" class="small_circle" style="background:#5DD4AF;"></span>
                        <span *ngIf="data.state === '异常'" class="small_circle" style="background:#F66F6A;"></span>
                        <span *ngIf="data.state === '停用'" class="small_circle" style="background: #999999;"></span>
                        <span *ngIf="data.state === '重启中'" class="loading_circle"></span> {{ data.state }}

                    </td>
                    <td>{{ data.apiurl }}</td>
                    <td>{{ data.call }}</td>
                    <td>{{ data.describe }}</td>
                    <td *ngIf="data.state !== '重启中'">
                        <a>查看监控</a>
                        <nz-divider nzType="vertical"></nz-divider>
                        <a *ngIf="data.state === '可用'">停用</a>
                        <a *ngIf="data.state === '异常'">重启</a>
                        <a *ngIf="data.state === '停用'||data.state === '重启中'">启用</a>

                        <nz-divider nzType="vertical"></nz-divider>
                        <a>调用指南</a>
                        <nz-divider nzType="vertical"></nz-divider>
                    </td>
                    <td *ngIf="data.state === '重启中'" class="restart_span">
                        <span>查看监控</span>
                        <nz-divider nzType="vertical"></nz-divider>
                        <span>启用</span>
                        <nz-divider nzType="vertical"></nz-divider>
                        <span>调用指南</span>
                        <nz-divider nzType="vertical"></nz-divider>
                    </td>
                </tr>
            </tbody>
        </nz-table>

    </div>

</div>